<template>
  <div class="order">
    <van-nav-bar title="我的订单" left-arrow @click-left="$router.go(-1)" />
    <van-tabs v-model="active" sticky>
      <van-tab name="0" title="全部"></van-tab>
      <van-tab name="1" title="待支付"></van-tab>
      <van-tab name="2" title="待发货"></van-tab>
      <van-tab name="3" title="待收货"></van-tab>
      <van-tab name="4" title="待评价"></van-tab>
    </van-tabs>
    <OrderListItem v-for="item in list" :key="item.order_id" :item="item" @refresh="handleRefresh" @payNow="handlePayNow" @cancel="handleCancel"></OrderListItem>

    <div class="payKeyboard">
      <van-popup v-model="showKeyboard" round closeable  position="bottom" :style="{ height: '80%' }">
        <div class="top_pay">
          <h3>请输入支付密码</h3>
          <span>￥{{ payItem.totalPrice }}</span>
        </div>
        <div class="account_pay">
          <div class="left_account">账号</div>
          <div class="right_accountNum">158****1751</div>
        </div>
        <div class="pay_methods">
          <van-radio-group v-model="radio">
            <van-cell-group>
              <van-cell title="余额支付" clickable @click="radio = '1'">
                <template #right-icon>
                  <van-radio name="1" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </div>
        <div class="footer_pay">
          <div class="pay_input">
            <div class="input_item" v-for="(item,index) in passwordNums" :key="index">
              <span class="num" v-if="passwordInput.length >= index + 1">*</span>
            </div>
          </div>
          <div class="keyboard_pay">
            <ul>
              <li v-for="(item,index) in keys" :key="index" @click="inputPay(item)">{{ item }}</li>
              <li><van-icon name="revoke" @click="delPay"/></li>
            </ul>
          </div>
        </div>
      </van-popup>
    </div>

    <van-popup v-model="showSetPassword" position="bottom" closeable round :style="{ height:'60%' }" @close="setPassword = ''">
      <div class="setPassTitle"><h3>设置您的支付密码</h3></div>
      <van-password-input
        :value="setPassword"
        :focused="showSetPassword"
        @focus="showSetPassword = true"
        :length="6"
      />
      <van-number-keyboard
      maxlength="6"
      v-model="setPassword"
      :show="showSetPassword"
      @blur="showSetPassword = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { goPay } from '@/api/pay'
import { cancelOrder, getOrderList } from '@/api/order'
import OrderListItem from '@/components/OrderListItem.vue'
import loginConfirm from '@/mixins/loginConfirm'
import { checkPasswordSet, setPassword } from '@/api/user'
export default {
  name: 'OrderPage',
  components: {
    OrderListItem
  },
  mixins: [loginConfirm],
  data () {
    return {
      active: this.$route.query.dataType || '0',
      list: [],
      payItem: {},
      showKeyboard: false,
      radio: '1',
      passwordNums: [1, 2, 3, 4, 5, 6],
      keys: [1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0],
      passwordInput: '',
      showSetPassword: false,
      setPassword: ''
    }
  },
  async created () {
    await this.getOrderList()
  },

  methods: {
    async getOrderList () {
      const res = await getOrderList(parseInt(this.active))
      console.log(res)

      this.list = res.data
    },
    handleRefresh () {
      this.getOrderList()
    },
    async handlePayNow (item) {
      if (!await this.checkPasswordSet()) {
        this.$toast({
          message: '您还未设置支付密码,请先设置支付密码',
          position: 'top'
        })
        this.showSetPassword = true
        return
      }
      this.payItem = item
      this.showKeyboard = true
    },
    handleCancel (item) {
      this.$dialog.confirm({
        title: '温馨提示',
        message: '你确定要取消订单吗'
      }).then(async () => {
        await cancelOrder(item.id)
        this.$toast('取消成功')
        setTimeout(() => {
          this.getOrderList()
        }, 500)
      }).catch(() => {})
    },
    inputPay (num) {
      if (this.passwordInput.length === this.passwordNums.length) {
        return
      }
      this.passwordInput = this.passwordInput + num.toString()
      if (this.passwordInput.length === this.passwordNums.length) {
        this.goPay()
      }
    },
    delPay () {
      if (this.passwordInput.length === 0) {
        return
      }
      this.passwordInput = this.passwordInput.substring(0, this.passwordInput.length - 1)
    },
    async goPay () {
      if (await this.loginConfirm()) {
        return
      }
      const res = await goPay(this.passwordInput, this.payItem.id)
      this.passwordInput = ''

      if (res.code === -5) {
        this.$toast('密码错误')
        return
      }
      if (res.code === -6) {
        this.$toast('余额不足')
        return
      }
      this.$toast('支付成功')
      setTimeout(() => {
        this.getOrderList()
        this.showKeyboard = false
      }, 500)
    },
    async checkPasswordSet () {
      const res = await checkPasswordSet()
      return res.data
    },
    async setPasswordHandle (password) {
      await setPassword(password)
      this.$toast('设置成功')
      this.showSetPassword = false
    }
  },
  watch: {
    active: {
      immediate: true,
      handler () {
        this.getOrderList()
      }
    },
    setPassword (value) {
      if (value.length === 6) {
        this.setPasswordHandle(value)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.order {
  background-color: #fafafa;
}
.van-tabs {
  position: sticky;
  top: 0;
}

.top_pay {
  margin-top: 15px;
  text-align: center;
}
.top_pay h3 {
  font-size: 14px;
}
.top_pay span {
  display: block;
  font-size: 40px;
  font-weight: 600;
  margin-top: 10px;
}

.account_pay {
  display: flex;
  justify-content: space-between;
  margin: 20px 15px 15px 15px;
  font-size: 14px;
}

.pay_methods {
  padding: 15px;
  height: 100px;
}

.pay_methods .van-cell {
  background-color: #ededed;
}

.footer_pay {
  width: 375px;
}
.pay_input {
  display: flex;
  padding: 10px;
  justify-content: space-between;
}

.input_item {
  width: 45px;
  height: 45px;
  background-color: #e5e5e6;
  border-radius: 5px;
  text-align: center;
  line-height: 55px;
  font-size: 30px;
}
.keyboard_pay {
  margin: 20px;
}
.keyboard_pay ul{
  display: flex;
  flex-wrap: wrap;
}

.keyboard_pay li {
  display: block;
  width: 33%;
  border: #e5e5e6 0.1px solid;
  text-align: center;
  padding: 18px;
  font-size: 20px;
}

.setPassTitle {
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  margin-top: 20px;
  margin-bottom: 10px;
}
</style>
